<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>后台管理系统</title>
  <link rel="stylesheet" href="${path}/statics/layui/css/layui.css">
</head>
<body class="layui-layout-body">
 <div class="layui-layout layui-layout-admin">
 <!-- 头部开始 -->
  <div class="layui-header">
    <div class="layui-logo">后台管理系统</div>
    <ul class="layui-nav layui-layout-right">
      <!-- 显示用户头像 -->
      <li class="layui-nav-item">
        <c:if test="${user.newFileName!=null}">
		  <a href="">
		     <img alt="" src="${serverPath}/userImg/${user.newFileName}" class="layui-nav-img">
		  </a>
		</c:if>
		 <c:if test="${user.newFileName==null}">
		    <button type="button" class="layui-btn" id="uploadId">
			  <i class="layui-icon">&#xe67c;</i>上传图片
			</button>
		</c:if>
      </li>
      <!-- 账号信息 -->
      <li class="layui-nav-item">
         <a href="javascript:;"> ${user.account}</a>
      </li>
      <!-- 安全退出 -->
      <li class="layui-nav-item">
        <a href="javascript:;" id="logOutBtn">安全退出</a>
      </li>
      <!-- 修改密码 -->
      <li class="layui-nav-item">
        <a href="javascript:;" id="updatePwdBtn">修改密码</a>
      </li>
    </ul>
  </div>
  <!-- 头部结束 -->
  
  <!-- 中间区域开始 -->
   <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
       <li class="layui-nav-item layui-nav-itemed">
          <a href="javascript:;">操作菜单</a>
          <dl class="layui-nav-child">
            <c:forEach items="${list}" var="menu" varStatus="i">
                 <dd>
	              <a  data-url="${path}/${menu.url}" data-title="${menu.name}"
	                 class="menu" data-id="${i.index}" data-type="tabAdd">${menu.name}</a>
	             </dd>
            </c:forEach>
          </dl>
        </li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 选项卡面板 -->
      <div class="layui-tab" lay-filter="tabs" lay-allowclose="true">
			<ul class="layui-tab-title"></ul>
			<div class="layui-tab-content"></div>
     </div>	
  </div>
  <!-- 中间区域结束 -->
  
   <!-- 底部固定区域 
  <div class="layui-footer">
    © layui.com - 底部固定区域
  </div>-->
</div>

<script src="${path}/statics/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['element','jquery','layer','upload'], function(){
  var element = layui.element;
  var $ = layui.jquery;
  var layer = layui.layer;
  var upload = layui.upload;
  
  //修改密码
  $("#updatePwdBtn").click(function(){
	  var index = layer.open({
		  type: 2 ,
		  title: ['修改密码', 'font-size:14px;'],
		  content: '${path}/loginCtl/toUpdatePwd',
		  area: ['400px', '300px'],
		  offset: 'auto',
		  anim: 1
		});
		//拿到的index是一个重要的凭据，它是诸如layer.close(index)等方法的必传参数。     
  });
  
  
  
  //安全退出
  $("#logOutBtn").click(function(){
	   layer.confirm('您确定要退出吗?', function(index){
		  location.replace("${path}/loginCtl/logOut");
		  layer.close(index);
		});  
  });
  
  //执行实例
  var uploadInst = upload.render({
    elem: '#uploadId' //绑定元素
    ,url: '${path}/loginCtl/toUploadImg' //上传接口
    ,accept: 'images'
    ,field: 'userImg'
    ,multiple: true
    
    
    ,done: function(res){
      //上传完毕回调
      if(res==0){
    	  layer.msg("上传成功",{icon:1});
    	  location.reload();
      }else{
    	  layer.msg("上传失败",{icon:2});
      }
      
      
    }
  
 //   ,error: function(){
      //请求异常回调
    //}
  });

  
//配置tab实践在下面无法获取到菜单元素
	$('.menu').on(
			'click',
			function() {
				var dataid = $(this);
				//这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
				if ($(".layui-tab-title li[lay-id]").length <= 0) {
					//如果比零小，则直接打开新的tab项
					active.tabAdd(dataid.attr("data-url"), dataid
									.attr("data-id"), dataid
									.attr("data-title"));
				} else {
					//否则判断该tab项是否以及存在
					var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
					$.each($(".layui-tab-title li[lay-id]"),
							function() {
								//如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
								if ($(this).attr("lay-id") == dataid
										.attr("data-id")) {
									isData = true;
								}
							})
					if (isData == false) {
						//标志为false 新增一个tab项
						active.tabAdd(dataid.attr("data-url"), dataid.attr("data-id"), dataid.attr("data-title"));
					}
				}
				//最后不管是否新增tab，最后都转到要打开的选项页面上
				active.tabChange(dataid.attr("data-id"));
			});

	var active = {
		//在这里给active绑定几项事件，后面可通过active调用这些事件
		tabAdd : function(url, id, name) {
			//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
			//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
			element.tabAdd('tabs', {
				title : name,
				content : '<iframe data-frameid="' + id
						+ '" scrolling="auto" frameborder="0" src="'
						+ url+ '" style="width:100%;height:99%;"></iframe>',
				id : id
			//规定好的id
			})
			FrameWH(); //计算ifram层的大小
		},
		tabChange : function(id) {
			//切换到指定Tab项
			element.tabChange('tabs', id); //根据传入的id传入到指定的tab项
		},
		tabDelete : function(id) {
			element.tabDelete("tabs", id);//删除
		}
	};
	function FrameWH() {
		var h = $(window).height();
		$("iframe").css("height", h + "px");
	}
});
</script>
</body>
</html>